nav{
    .navTotal{
        .toolBar{
            margin-left: 8px;
        }
    }
}

main{
    .index{
        .main{
            width: 100%;
            padding: 24px 0;
            span{
                font-size: 12px;
                line-height: 16px;
                opacity: 0.9;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
    // 登录/注册
    .login_register{
        margin-top: 0;
        .main{
            width: 100%;
            height: 200px;
            background-image: url('../img/Personal-Center_login_register.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
            .container{
                align-items: center;
                flex-direction: row;
                flex: 1 1 0%;
                padding: 0 100px;
                height: 100%;
                .avatar{
                    width: 88px;
                    height: 88px;
                    border-radius: 44px;
                    background-image: url('../img/ic_avatar.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    background-position: center center;
                }
                .username{
                    flex-grow: 1;
                    margin-left: 20px;
                    padding: 14px 0;
                    height: 88px;
                    font-size: 24px;
                    color: #fff;
                    line-height: 88px;
                    cursor: pointer;
                }
                .others{
                    justify-content: space-between;
                    box-sizing: border-box;
                    position: relative;
                    padding: 36px 32px;
                    width: 616px;
                    height: 120px;
                    background-color: rgb(255, 255, 255);
                    border-radius: 16px;
                    .integral,.coupons,.vouchers{
                        flex-grow: 1;
                        justify-content: space-between;
                        padding-right: 40px;
                        // width: 33.3%;
                        cursor: pointer;
                        .text{
                            width: 50%;
                            flex-direction: column;
                            justify-content: center;
                            span:first-child{
                                margin-bottom: 3px;
                                line-height: 24px;
                                font-size: 18px;
                                color: rgb(0, 0, 0);
                                opacity: 1;
                            }
                            span:last-child{
                                line-height: 21px;
                                font-size: 16px;
                                color: rgb(0, 0, 0);
                                opacity: 0.9;
                            }
                        }
                        .logo{
                            width: 48px;
                            height: 48px;
                            img{
                                width: 48px;
                                height: 48px;
                            }
                        }
                    }
                    // 代金券
                    .vouchers{
                        padding-right: 0;
                    }
                }
            }
        }
    }

    // 我的订单
    .orders{
        margin-top: 24px;
        .main{
            flex-direction: column;
            width: 100%;
            background-color: rgb(255, 255, 255);
            // 抬头
            .title{
                margin: 12px 24px 0 24px;
                height: 64px;
                justify-content: space-between;
                align-items: center;
                height: 64px;
                font-weight: 400;
                color: rgb(0, 0, 0);
                cursor: pointer;
                .left_title{
                    align-items: center;
                    width: 90%;
                    height: 64px;
                    font-size: 24px;
                    line-height: 32px;
                    // &>span{margin-right: 40px;}
                }
                .right_title{
                    justify-content: flex-end;
                    align-items: center;
                    // margin-top: 20px;
                    width: 10%;
                    font-size: 14px;
                    line-height: 19px;
                    text-align: right;
                    opacity: 0.6;
                }
                .right_title::after{
                    content: "";
                    display: inline-block;
                    margin-top: 3px;
                    margin-left: 4px;
                    width: 17px;
                    height: 18px;
                    background-image: url('../img/icon03.svg');
                    background-position: -48px 0;
                }
                // .right_title:hover{color: #cf0a2c;}
            }

            .moduleList{
                padding: 12px 8px 24px 8px;
                justify-content: space-around;
                align-items: center;
                div{
                    flex-direction: column;
                    align-items: center;
                    .icon{
                        justify-content: center;
                        align-items: center;
                        width: 48px;
                        height: 48px;
                        img{
                            width: 33px;
                            height: 33px;
                        }
                    }
                    span{
                        display: block;
                        margin: 10px 0 8px 0;
                        width: 192px;
                        text-align: center;
                        font-size: 14px;
                        line-height: 19px;
                        color: rgb(0, 0, 0);

                    }
                }
            }
        }
    }

    // 我的频道、服务工具
    .channels,.service_tools{
        margin-top: 24px;
        .main{
            flex-direction: column;
            width: 100%;
            background-color: rgb(255, 255, 255);
            .title{
                margin: 4px 24px 0 24px;
                height: 64px;
                justify-content: space-between;
                align-items: center;
                height: 64px;
                font-weight: 400;
                color: rgb(0, 0, 0);
                cursor: pointer;
                .left_title{
                    align-items: center;
                    width: 90%;
                    height: 64px;
                    font-size: 24px;
                    line-height: 32px;
                    // &>span{margin-right: 40px;}
                }
            }

            .moduleList{
                padding: 12px 0;
                justify-content: space-around;
                align-items: center;
                .container{
                    // padding-bottom: 12px;
                    padding: 8px 4px 16px 4px;
                    flex-grow: 1;
                    flex-direction: column;
                    align-items: center;
                    height: 95px;
                    cursor: pointer;
                    .icon{
                        justify-content: center;
                        align-items: center;
                        width: 48px;
                        height: 48px;
                        img{
                            width: 48px;
                            height: 48px;
                        }
                    }
                    span{
                        margin: 10px 0 0 0;
                        padding: 0 28px;
                        display: block;
                        margin: 10px 0 8px 0;
                        width: auto;
                        text-align: center;
                        font-size: 14px;
                        line-height: 19px;
                        color: rgb(0, 0, 0);
                    }
                }
                .container:hover{opacity: 0.7;}
            }
        }
    }


    // 猜你喜欢
    .guess_you_like{
        margin-top: 24px;
        width: 100%;
        // 每个模块的抬头
        .title{
            align-items: center;
            height: 64px;
            font-weight: 400;
            color: rgb(0, 0, 0);
            cursor: pointer;
            .left_title{
                justify-content: flex-start;
                align-items: center;
                width: 90%;
                height: 64px;
                &>span{margin-right: 40px;}
            }
            // title放大
            .chosen{
                font-size: 24px;
                line-height: 32px;
            }
            .right_title{
                justify-content: flex-end;
                align-items: center;
                width: 10%;
                font-size: 14px;
                line-height: 19px;
                opacity: 0.6;
            }
            .right_title::after{
                content: "";
                display: inline-block;
                width: 17px;
                height: 18px;
                background-image: url('../../img/icon03.svg');
                background-position: -48px 0;
            }
            // .right_title:hover{color: #cf0a2c;}
        }
        // 每个模块的主要内容（-各个商品模块）
        .main{
            flex-wrap: wrap;
        }
        // 商品模块
        .commodity{
            flex-direction: column;
            align-items: center;
            margin-left: 12px;
            width: 291px;
            height: 387px;
            background-color: rgb(255, 255, 255);
            cursor: pointer;
            .tag{
                margin-right: 4px;
                padding: 0 4px;
                flex-shrink: 0;
                // width: 56px;
                height: 16px;
                line-height: 16px;
                text-align: center;
                font-size: 12px;
                background-image: linear-gradient(1.5708rad, rgb(207, 10, 44), rgb(255, 45, 78));
                border-radius: 4px;
                color: rgb(255, 255, 255);
            }
            .text_ellipsis{
                .good_title,.good_dept{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            .good_picture{
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 183px;
                img{
                    width: 142px;
                    height: 142px;
                }
            }
            .good_info{
                box-sizing: border-box;
                padding: 8px 24px 27px 24px;
                width: 100%;
                height: 107px;
                text-align: center;
            }
            .good_title{
                margin: 4px auto;
                line-height: 19px;
                font-size: 14px;
            }
            .good_dept{
                margin-bottom: 10px;
                height: 18px;
                line-height: 18px;
                font-size: 13px;
                opacity: 0.5;
            }
            .good_price{
                .new{
                    margin-right: 8px;
                    line-height: 21px;
                    color: rgb(207, 10, 44);
                    font-size: 16px;
                    vertical-align: middle;
                }
                .old{
                    line-height: 16px;
                    color: rgb(0, 0, 0);
                    font-size: 12px;
                    text-decoration: line-through;
                    opacity: 0.5;
                    vertical-align: middle;
                }
            }
        }
        .commodity:hover{
            box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 36px;
        }
    }
    
    .sameType{
        .title{
            .left_title{
                // not()选择器用法----遗忘-----记复习
                &>span:not(.chosen){
                    font-size: 18px;
                    line-height: 24px;
                    color: rgb(0, 0, 0);
                    opacity: 0.6;
                }
                &>span:not(.chosen):hover{
                    color: rgb(207, 10, 44);
                    opacity: 1;
                }
            }
        }
        .main{
            margin-top: -12px;
            .commodity{
                margin-top: 12px;
                position: relative;
                .good_picture{
                    // height: 253.927px;
                    height: 67%;
                    img{
                        width: 63%;
                        height: 72%;
                    }
                }
                .top_tag{
                    padding: 0 24px;
                    text-align: center;
                    position: relative;
                    top: -30px;
                    span{
                        display: block;
                        height: 20px;
                        padding: 0 8px;
                        background-color: rgb(251, 231, 234);
                        font-size: 12px;
                        font-weight: 400;
                        color: rgb(207, 10, 44);
                        line-height: 21px;
                        text-align: center;
                        border-radius: 4px;
                        overflow: hidden;
                        word-break: break-all;
                    }
                }
                .good_info{
                    height: 30%;
                    .tag_title{
                        justify-content: center;
                        .good_title{
                            margin: 0;
                            font-weight: 600;
                        }
                    }
                    .good_dept{
                        margin: 8px 0 16px 0;
                    }
                    .good_price{
                        margin-top: 8px;
                        .new{
                            margin-right: 0;
                        }
                    }
                    .bottom_tag{
                        margin-top: 8px;
                        justify-content: center;
                        .tag{
                            height: 16px;
                            background-image: none;
                            background-color: rgb(255, 255, 255);
                            color: rgb(207, 10, 44);
                            border: 1px solid rgba(207, 10, 44, 0.4);
                        }
                        .tag:last-child{margin-right: 0;}
                    }
                    .evaluation{
                        justify-content: center;
                        flex-wrap: nowrap;
                        margin-top: 8px;
                        height: 16px;
                        line-height: 16px;
                        font-size: 12px;
                        span{
                            margin-top: 2px;
                            color: rgb(0, 0, 0);
                            opacity: 0.5;
                            cursor: pointer;
                        }
                        span:first-child{
                            margin-right: 8px;
                        }
                    }
                }
                &:nth-child(1){margin-left: 0;}
                &:nth-child(5){margin-left: 0;}
                &:nth-child(9){margin-left: 0;}
            }
        }
    }
    .hasTopTag{
        .good_info{
            position: relative;
            top: -30px;
        }
    }

    // end
    .end{
        padding: 16px 0;
        width: 100%;
        text-align: center;
        line-height: 16px;
        font-size: 14px;
        color: rgb(0, 0, 0);
        opacity: 0.6;
    }
}